const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    /* 编译的模式：development 开发 不会压缩，优化，只会编译； production 生成环境，压缩，优化 */
    mode: 'development',
    /* 入口 */
    entry: './src/index.js',
    /* 出口 */
    output: {
        path: path.resolve(__dirname, 'dist'),
        /* bundle 一簇 */
        filename: 'bundle.js'
    },
    /* module 用于定义webpack对各类资源的处理loader */
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                },
            },
        },
            {
                test: /\.css$/,
                use: [
                    "style-loader", // 将 JS 字符串生成为 style 节点

                    "css-loader", //  将 CSS 转化成 CommonJS 模块
                ],
            },
            // 代表对 less 处理 less 匹配规则，要写在 css 处理之下 webpack 规则之下，从下到上执行
            {
                test: /\.less$/,
                use: [
                    "style-loader", // 将 JS 字符串生成为 style 节点
                    "css-loader", //  将 CSS 转化成 CommonJS 模块
                    "less-loader",
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader", // 将 Sass 编译成 CSS，默认使用 Node Sass
                ],
            },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                loader: "url-loader",
                options: {
                    publicPath: "./image", // 相对打包后的index.html的图片位置
                    outputPath: "image/", // 输出到build的目录image下
                    // 图片小于 10kb,会被 base64 处理
                    limit: 10 * 1024,
                    // 解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                    // 给图片重命名
                    name: "[name].[hash:6].[ext]",
                },
                type: "javascript/auto",
            },

        ],
    },

    /*为webpack配置插件功能*/
    plugins: [
        new HtmlWebpackPlugin({
            /*src/index.html作为模板，然后把打包的 bundle.js插入到 index.html模板页面*/
            template: "./src/index.html",
        }),
    ],

    // webpack-dev-server 在本地开发环境里面启动了一个web服务器，我们可以使用这个web服务器做代理操作（同域代理） 对我们的webpack里面的网络请求进行拦截，拦截之后帮我们发送ajax请求。
    devServer: {
        /* proxy 代理，拦截 ，会拦截我们项目里面以 /api 请求的地址
        * 全部代理到 http://localhost:8081
        *
        * 以后我们项目里面的接口请求，全部要加一个 /api 前缀

            document.getElementById('btn').onclick = function () {
                // 完整地址：以 webpack-dev-server  启动的域名和端口作为完整的url地址
                //  http://192.168.47.1:8080/api/user/lst ---> http://localhost:8081
                // ----> http://localhost:8081/user/lst


                // http://192.168.47.1:8080/api/user/lst ---> http://localhost:8081/api/user/lst
                pathRewrite: {
                    "^/api": ""
                }

                let url = '/api/user/lst';
                const xhr = new XMLHttpRequest();
                xhr.open('get', url);

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        console.log(xhr.responseText);
                    }
                }
                xhr.send();
            }

        *
        * */
        proxy: {
            '/api': {
                target: "http://localhost:8081",
                pathRewrite: {
                    "^/api": ""
                },
                changeOrigin: true
            }
        }
    }


}
